<template>
  <div>
    <div class="nav-bar">
      <div class="nav-icon" @click="$router.go(-1)">
        <img src="../../assets/img/member/back_icon.png" alt="" />
      </div>
      <div class="nav-title">{{ title }}</div>
      <div class="nav-btn"></div>
    </div>
    <div class="content">
      <div class="apply-box">
        <div class="icon-member"></div>
        <div class="apply-type">PLUS会员（{{ info.expiry_time }}天）</div>
        <div class="apply-money">
          ¥<span>{{ info.total }}</span>
        </div>
      </div>
      <div class="top-border"></div>
      <div class="apply-option">
        <div class="list-title">选择支付方式</div>
        <ul>
          <li
            v-for="(item, index) in optionList"
            :key="index"
            class="option-list"
            @click="itemClick(index)"
            :class="[currentIndex == index ? 'option-list-active' : '']"
          >
            <div class="option-icon">
              <img :src="payImg[index]" alt="">
            </div>
            <div class="option-name">
              <div>{{ item.title }}</div>
              <div>{{ item.amount }}</div>
            </div>
            <span
              class="option-btn"
              :class="[currentIndex == index ? 'option-btn-active' : '']"
            ></span>
          </li>
        </ul>
      </div>
    </div>
    <div class="tab-bar">
      <div class="tab-btn" @click="payBtnClick">确认支付</div>
    </div>
    <div
      class="mask"
      v-show="
        (currentIndex == 4 || currentIndex == 5) && (razerShow || uniShow)
      "
    ></div>
    <ul class="dlg" v-show="currentIndex == 4 && razerShow">
      <p>请选择货币种类:</p>
      <li
        v-for="(list, id) in razerType"
        :key="id"
        :class="[razerIndex == id ? 'razer-active' : '']"
        @click="razerClick(id)"
      >
        {{ list.title}}
      </li>
    </ul>
    <ul class="dlg" v-show="currentIndex == 5 && uniShow">
      <p>请选择货币种类:</p>
      <li
        v-for="(list, id) in uniType"
        :key="id"
        :class="[uniIndex == id ? 'razer-active' : '']"
        @click="uniClick(id)"
      >
        {{ list.title }}
      </li>
    </ul>
  </div>
</template>

<script>
// import { getVipPay } from "../../../network/my";
// import { getPost } from "../../../network/post";
import {Toast} from 'vant'
import NavBar from '../../components/common/navbar/NavBar.vue';
export default {
  components: { NavBar },
  name: "BuyMember",
  data() {
    return {
      iid: null,
      title: "",
      info: {},
      optionList: [],
      currentIndex: 0,
      razerType: [],
      uniType: [],
      razerIndex: 0,
      uniIndex: 0,
      razerShow: false,
      uniShow: false,
      iconImg: {
        2: require('../../assets/img/member/Alipay.png'),
        4: require('../../assets/img/member/mycard.png'),
        6: require('../../assets/img/member/gash.png'),
        8: require('../../assets/img/member/WeChat.png'),
        7: require('../../assets/img/member/razr.png'),
        51: require('../../assets/img/member/unipin.png')
      }
    };
  },
  computed: {
    iconSort() {
      let arr = []
      if (this.optionList) {
        this.optionList.forEach(item => {
          arr.push(item.paytype)
        })
      }
      return arr
    },
    payImg() {
      let arrImg = []
      if (this.iconSort) {
        this.iconSort.forEach(item => {
          for (let key in this.iconImg) {
            if (item == key) {
              arrImg.push(this.iconImg[key])
            }
          }
          return arrImg
        })
        return arrImg
      }
    }
  },
  created() {
    this.iid = this.$route.params.iid;
    this.getVipInfo(this.iid);
  },
  methods: {
    getVipInfo(id) {
     this.axios.get('/buy_member_' + id + '.json', {}).then((res) => {
        this.title = res.data.header;
        this.info = res.data.info;
        this.optionList = res.data.paylist;
        this.razerType = res.data.pay5;
        this.uniType = res.data.pay6;
        console.log(res.data);
      });
    },
    getAmount(item) {
      if (item == 4) {
        return this.razerType[item].title
      }else if (item == 5) {
        return this.uniType[item].title
      }else {
        let str = this.optionList[this.currentIndex].amount
        return str.substring(str.length-3)
      }
    },
    payBtnClick() {
      var url = "/vip_paydo";
      var data = {
        paytype: this.optionList[this.currentIndex].paytype === 2 ? 21 : this.optionList[this.currentIndex].paytype,
        currency_code: this.getAmount(this.currentIndex),
        vip_level: this.info.vip_level,
      };
      getPost(url, data).then((res) => {
        if (res.status == "ok") {
          location.href = res.data.pay_url
        } else if (res.info == "no_login") {
          window.location.href = loginurl
        } else {
          Toast(res.info)
        }
        // console.log(res);
      });
    },
    itemClick(index) {
      this.currentIndex = index;
      if (index == 4) {
        this.razerShow = true;
      } else if (index == 5) {
        this.uniShow = true;
      }
    },
    razerClick(id) {
      this.razerIndex = id;
      this.razerShow = false;
      this.optionList[this.currentIndex].amount = this.razerType[id].amount;
    },
    uniClick(id) {
      this.uniIndex = id;
      this.uniShow = false;
      this.optionList[this.currentIndex].amount = this.uniType[id].amount;
    },
  },
};
</script>

<style scoped>
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 1.173333rem;
  box-sizing: border-box;
  padding: 0 .426667rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #333333;
}

.nav-icon {
  width: 1.76rem;
}

.nav-icon img {
  width: .56rem;
  height: .56rem;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: .426667rem;
  font-weight: bold;
  color: #fff;
}

.nav-btn {
  width: 1.76rem;
}

.content {
  position: fixed;
  width: 10rem;
  top: 1.173333rem;
  bottom: 1.333333rem;
  left: 50%;
  transform: translateX(-50%);
  right: 0;
  overflow: scroll;
  background: #fff;
}

.content::-webkit-scrollbar {
  display: none;
}

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  right: 0;
  width: 10rem;
  height: 1.333333rem;
  background: linear-gradient(133deg, #FFD892 0%, #EBA448 100%);
}

.tab-btn {
  width: 10rem;
  height: 1.333333rem;
  font-size: .4rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.333333rem;
  color: #ffffff;
}

.apply-box {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: .4rem .266667rem;
  margin: .426667rem;
  width: 9.146667rem;
  height: auto;
  background: #fefaf3;
  border: .053333rem solid #e0bc81;
  border-radius: .186667rem;
}

.icon-member {
  flex-shrink: 1;
  width: 1.08rem;
  height: 1.08rem;
  background: url("../../assets/img/member/icon_member.png") no-repeat;
  background-size: 100%;
}

.apply-type {
  margin-left: .133333rem;
  flex-grow: 1;
  font-size: .426667rem;
  font-weight: 800;
  color: #222222;
}

.apply-money {
  flex-shrink: 1;
  font-size: .373333rem;
  font-weight: 800;
  line-height: .893333rem;
  color: #e59b37;
}

.apply-money span {
  font-size: .64rem;
  margin-left: .133333rem;
}

.top-border {
  width: 100%;
  height: .266667rem;
  background: #f8f8f8;
}

.apply-option {
  box-sizing: border-box;
  padding: 0 .426667rem;
  width: 100%;
  height: auto;
}

.list-title {
  font-size: .426667rem;
  font-weight: 800;
  line-height: .6rem;
  padding: .4rem 0;
  color: #222222;
}

.option-icon {
  width: .64rem;
  height: .64rem;
}

.option-icon img {
  width: .64rem;
  height: .64rem;
}

.option-list {
  box-sizing: border-box;
  padding: 0 .4rem 0 .4rem;
  width: 100%;
  height: 1.173333rem;
  border-radius: .133333rem;
  box-shadow: 0 .04rem .16rem 0 rgba(0, 0, 0, 0.2);
  margin-bottom: .266667rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.option-list-active {
  border: .04rem solid #14cb1a;
  background-color: #f6f6f6;
  padding: 0 .36rem;
}

.option-name {
  flex: 1;
  padding: 0 .266667rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .346667rem;
  font-weight: 400;
  color: #222222;
}

.option-btn {
  width: .506667rem;
  height: .506667rem;
  background: #fff;
  box-shadow: 0 .04rem .08rem 0 rgba(0, 0, 0, 0.16);
  border-radius: 50%;
}

.option-btn-active {
  background: url("../../assets/img/member/selected.png") no-repeat;
  background-size: 100%;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
}

.dlg {
  box-sizing: border-box;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f3f3f3;
}

.dlg p {
  color: #000;
  font-size: .426667rem;
  font-weight: 800;
  margin: .266667rem 0;
  text-indent: .2rem;
}

.dlg li {
  font-size: .426667rem;
  height: .96rem;
  border-bottom: .013333rem solid #fff;
  line-height: .96rem;
  background: #f3f3f3;
  text-indent: .4rem;
}

.dlg li:last-child {
  border: 0;
}

.razer-active {
  background: #ff7700 !important;
  color: #fff;
}
</style>